<template>
  <div>
    <div class="contbox6_10">
      <!-- 权益变更列表 -->
      <p class="titlelist6_10">
        机构管理
        <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>机构列表
        <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>权益变更记录
      </p>
      <div class="sousuojg6_10">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="机构ID" style="float: left;">
            <el-input v-model="form.officeUid" style="width: 200px;margin-right: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="品牌名称" style="float: left;">
            <el-input v-model="form.ChannelName" style="width: 200px;margin-right: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="机构名称" style="float: left;">
            <el-input v-model="form.officeName" style="width: 200px;margin-right: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="订单号" style="float: left;">
            <el-input v-model="form.orderCode" style="width: 200px;margin-right: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="归属机构" style="float: left;" v-if="typebox==0">
            <el-input v-model="form.oEMName" style="width: 200px;margin-right: 40px;"></el-input>
          </el-form-item>
          <el-form-item label="变更类型" style="float: left;margin-right: 40px;">
            <el-select v-model="form.changeType" clearable placeholder="请选择类型">
              <el-option label="购买" value="0"></el-option>
              <el-option label="规则升级" value="1"></el-option>
              <el-option label="规则降级" value="2"></el-option>
              <el-option label="oem调整升级" value="3"></el-option>
              <el-option label="oem调整降级" value="4"></el-option>
              <el-option label="购机赠送" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="变更日期" style="float: left;">
            <el-col :span="9">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期"
                v-model="form.startDate"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="1" style="text-align: center;">-</el-col>
            <!-- <el-col :span="9">
                      <el-time-picker placeholder="选择时间" v-model="form.EndDate" style="width: 100%;"></el-time-picker>
            </el-col>-->
            <el-date-picker
              v-model="form.endDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择结束时间"
              style="width: 40%;"
            ></el-date-picker>
          </el-form-item>

          <el-form-item
            style="float: right;margin-right: 20px;    margin-top: 10px;text-align: right;"
          >
            <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
            <!-- <el-button>取消</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <p class="titlelist6_10" style="margin-bottom: 10px;    line-height: 45px;">
        机构列表
        <!-- <el-button style='float: right;margin-right: 30px;' type="primary" @click="onS">创建OEM</el-button> -->
      </p>
      <div style="width: 100%;float: left;border-bottom: 1px solid #eee;margin-bottom: 30px;"></div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        :header-cell-style="{background:'#DCDCDC',color:'#222'}"
        border
        style="width: 98%;margin-bottom: 30px;margin-left: 2%;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="officeUid" label="机构ID" width="300"></el-table-column>
        <el-table-column prop="officeName" label="机构名称" width="120"></el-table-column>
        <el-table-column prop="oEMName" label="上级OEM" width="300"></el-table-column>
        <el-table-column prop="orderCode" label="订单号" width="300"></el-table-column>
        <el-table-column prop="changeType" label="变更类型" width="120"></el-table-column>
        <el-table-column prop="channelName" label="品牌名称" width="120"></el-table-column>
        <el-table-column prop="oldMbr" label="原等级" width="120"></el-table-column>
        <el-table-column prop="merName" label="新等级" width="200"></el-table-column>
        <el-table-column prop="createDate" label="变更时间" min-width="200" show-overflow-tooltip></el-table-column>
      </el-table>
      <div></div>
      <p
        style="width: 100%;float: left;text-align: left;font-size: 16px;color: #1FA5F3;cursor: pointer; text-indent: 30px;"
        @click="sub1()"
      >批量导出</p>
      <div style="clear: both;"></div>
      <el-pagination
        style="text-align: right;"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="form.number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "route",
  data() {
    return {
      tableData: [], //数据
      currentPage: 1, //默认显示第一页
      pageSize: 1, //默认每页显示10条
      totalNum: 1000, //总页数
      msg: [],
      form: {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : "", //OEMid
        OEMName: "",
        officeUid: "",
        ChannelName: "",
        officeName: "",
        orderCode: "",
        changeType: "",
        startDate: "",
        endDate: "",
        officeCode: "",
        page: 1,
        number: 10,
      },
      agtType: sessionStorage.getItem("agtType"),
      tableData: [],
      multipleSelection: [],
      // urltype:this.GLOBAL.httpurl,
      typebox: "",
    };
  },
  mounted: function () {
    this.typebox = localStorage.getItem("jurisdiction");
    window.scrollTo(0, 0);
    var _this = this;
    console.log(22, sessionStorage.getItem("agtType"));
    // document.title = '权益变更';
    if (sessionStorage.getItem("agtType") == "OEM") {
      _this.form.oemUid = sessionStorage.getItem("bgjilu");
      _this.form.officeCode = "";
    }
    if (sessionStorage.getItem("agtType") == "普通代理") {
      _this.form.officeCode = sessionStorage.getItem("bgjilu");
      _this.form.oemUid = "";
    }
    _this.shuju();
  },
  components: {},

  methods: {
    onSubmit() {
      this.shuju();
    },
    shuju() {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/member/ajaxMbrOrderList",
          data: _this.form,
        })
        .then(function (d) {
          if (d.data.code == "0000") {
            _this.tableData = d.data.data;
            //     <el-option label="购买" value="0"></el-option>
            // <el-option label="规则升级" value="1"></el-option>
            // <el-option label="规则降级" value="2"></el-option>
            // <el-option label="oem调整升级" value="3"></el-option>
            // <el-option label="oem调整降级" value="4"></el-option>
            // <el-option label="购机赠送" value="5"></el-option>
            for (var s = 0; s < _this.tableData.length; s++) {
              _this.tableData[s].changeType =
                _this.tableData[s].changeType == 0
                  ? "购买"
                  : _this.tableData[s].changeType == 1
                  ? "规则升级"
                  : _this.tableData[s].changeType == 2
                  ? "规则降级"
                  : _this.tableData[s].changeType == 3
                  ? "oem调整升级"
                  : _this.tableData[s].changeType == 4
                  ? "oem调整降级"
                  : "购机赠送";
            }
            _this.totalNum = d.data.total;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          }
        })
        .catch(function (error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    sub1() {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/member/mer/excel/export",
          responseType: "blob",
          data: _this.form,
        })
        .then(function (d) {
          let blob1 = new Blob([d.data], { type: "application/vnd.ms-excel" });
          /* let objectUrl = URL.createObjectURL(blob1);
                        window.location.href = objectUrl;*/
          var date = new Date();

          var year = date.getFullYear();

          var month = date.getMonth() + 1;
          var day = date.getDate();
          var hour = date.getHours();
          var minute = date.getMinutes();
          var second = date.getSeconds();
          date =
            year +
            "" +
            month +
            "" +
            day +
            "" +
            hour +
            "" +
            minute +
            "" +
            second; //'+date+'

          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob1); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "权益变更记录" + date + ".xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        })
        .catch(function (error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    handleSizeChange(val) {
      /*alert(`每页 ${val} 条`);*/
      this.form.number = val; //动态改变
      this.shuju();
    },
    handleCurrentChange(val) {
      /* alert(`当前页: ${val}`);*/
      this.form.page = val; //动态改变
      this.shuju(); /* this.currentPage = val;*/ //动态改变
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    showdou() {
      this.$refs.mychild.parentHandleclick();
    },
  },
};
</script>

<style scoped>
/* 单独样式 */
.contbox6_10 {
  width: 96%;
  margin-left: 2%;
  /* height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.titlelist6_10 {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #222;
  margin-top: 40px;
}
.sousuojg6_10 {
  float: left;
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  background-color: #f6f6f6;
  margin-top: 20px;
  border-radius: 5px;
}
</style>
